<template>
  <div>
    <div class="springFrame">
      <div id="container-map"></div>
      <div ref="infoData" class="custom-info input-card content-window-card">
        <div class="info-top">
          <div>
            <span>{{ devInfo.title }}</span>
            <span style="font-size: 11px; margin-left: 20px; color: #f00"
              >状态：{{ devInfo.state }}</span
            >
          </div>
          <img
            @click="closeInfoWindow"
            src="https://webapi.amap.com/images/close2.gif"
          />
        </div>
        <div class="info-middle" style="background-color: white">
          <!-- <img class="info-img" src="img/dev.png" /> -->
          <a
            class="info-a-title"
            href="#"
            >{{devInfo.license}}</a
          ><br />地址：{{ devInfo.address }}<br />
          <div class="info-div">姓名：
            {{ devInfo.electricity }}
            </div>
          <span class="info-span">
            电话：{{ devInfo.gas }}<br />
            <div class="info-div">运输中：{{ devInfo.guan }}</div>
            <span class="info-span"> 装载吨数：{{ devInfo.water }}</span
            ><br />
            <div class="info-div">车辆类型：{{ devInfo.years }}</div>
            <!-- <span class="info-span"> 总产量：{{ devInfo.total }}</span
            ><br />
            <div class="info-div">建厂时间：{{ devInfo.time }}</div>
            <span class="info-span">建筑面积：{{ devInfo.mianji }}</span> -->
          </span>
        </div>
        <div
          class="info-bottom"
          style="position: relative; top: 0px; margin: 0px auto"
        >
          <img src="https://webapi.amap.com/images/sharp.png" />
        </div>
      </div>
    </div>
    <div>
      <div id="container"></div>
      <!-- <div
        class="title"
        style="
          touch-action: none;
          color: rgb(255, 255, 255);
          background: rgba(0, 0, 0, 0.5);
          font-size: 16px;
          transform: translate(0px, 10px);
        "
      >
        全国累计车辆位置<span style="font-size: 14px">（截止 3月30日）</span>
      </div> -->
    </div>
    <!-- <div class="info">
      点击地图上的点标记，打开所添加的自定义信息窗体
    </div> -->
    <!--  -->
    <div class="search-css">
      <Row>
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="68"
          class="search-form"
          style="width: 1680px"
        >
          <FormItem label="查询范围" prop="goodNo">
            <Input
              type="text"
              v-model="searchForm.goodNo"
              placeholder="请输入货源编号"
              clearable
              style="width: 200px"
            />
          </FormItem>

          <FormItem label="车辆状态">
            <Select
              clearable
              v-model="searchForm.orderStates"
              style="width: 180px"
            >
              <Option value="3,4">全部</Option>
              <Option value="4">待审核</Option>
              <Option value="3">待确认</Option>
            </Select>
          </FormItem>
          <FormItem label="车辆类型">
            <Select
              clearable
              v-model="searchForm.orderStates"
              style="width: 180px"
            >
              <Option value="3,4">全部</Option>
              <Option value="4">待审核</Option>
              <Option value="3">待确认</Option>
            </Select>
          </FormItem>
          <div>
            <div class="Check-css">货物类型:</div>
            <CheckboxGroup v-model="searchForm.fruit">
              <Checkbox label="香蕉"></Checkbox>
              <Checkbox label="苹果"></Checkbox>
              <Checkbox label="西瓜"></Checkbox>
            </CheckboxGroup>
          </div>
          <div style="display: flex">
            <div>
              <div style="margin: 10px 0">危险品分类:</div>
              <CheckboxGroup v-model="searchForm.fruit">
                <Checkbox label="香蕉"></Checkbox>
                <Checkbox label="苹果"></Checkbox>
                <Checkbox label="西瓜"></Checkbox>
              </CheckboxGroup>
            </div>
            <div style="margin-top: 32px">
              <span style="margin-left: 35px" class="br">
                <Button @click="handleSearch" type="primary" icon="ios-search"
                  >搜索</Button
                >
                <Button @click="handleReset">重置</Button>
                <Button @click="getDataList" icon="md-refresh">刷新</Button>
              </span>
            </div>
          </div>
        </Form>
      </Row>
    </div>
    <!--  -->
    <div class="line"></div>
    <!--  -->
    <div>
      <Form
        ref="searchForm"
        :model="searchFormTable"
        inline
        :label-width="68"
        class="search-form"
      >
        <FormItem label="查询范围" prop="goodNo">
          <Input
            type="text"
            v-model="searchFormTable.goodNo"
            placeholder="请输入货源编号"
            clearable
            style="width: 200px"
          />
        </FormItem>
        <FormItem label="查询范围" prop="goodNo">
          <Input
            type="text"
            v-model="searchFormTable.goodNo"
            placeholder="请输入货源编号"
            clearable
            style="width: 200px"
          />
        </FormItem>
        <Button
          style="margin-left: 35px"
          @click="handleSearch"
          type="primary"
          icon="ios-search"
          >搜索</Button
        >
      </Form>
      <Row>
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          ref="table"
          @on-select="selectData"
        >
          <template late slot-scope="{ row }" slot="actionCarriage">
            <div style="display: flex">
              <div>
                <span
                  style="color: #2d8cf0; cursor: pointer"
                  @click="selectCar(row)"
                  >选择
                </span>
              </div>
              <div
                style="color: #2d8cf0; cursor: pointer; margin-left: 10px"
                @click="getVehicleposition"
              >
                定位
              </div>
            </div>
          </template>
        </Table>
      </Row>
      <Row type="flex" justify="end" class="page" style="margin-top: 2vh">
        <Col span="24" style="text-align: right">
          <Page
            transfer
            :current="searchForm.pageNumber"
            :total="total"
            :page-size="searchForm.pageSize"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Col>
      </Row>
    </div>
    <!--  -->
    <div>
      <el-table
        :header-cell-style="{ background: '#F5F5F5', color: '#606266' }"
        ref="table"
        border
        size="small"
        :data="settlementData"
        style="width: 99.5%"
        :rules="rules"
        height="286"
        empty-text="暂无数据"
      >
        <el-table-column prop="name" label="姓名" width="150">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.name ? scope.row.name : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="license" label="车牌号" width="150">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.license ? scope.row.license : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="车辆类型" width="150">
          <template slot-scope="scope">
            <div style="font-size: 15px">
              {{ scope.row.type ? scope.row.type : "--" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200" prop="capacity" label="核定载质量">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.capacity"
              placeholder="请填写核定载质量"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column width="240" prop="loadingTime" label="装车时间">
          <template slot-scope="scope">
            <!-- <el-date-picker
              v-model="scope.row.loadingTime"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
            >
            </el-date-picker> -->
            <DatePicker
              type="datetime"
              transfer
              clearable
              v-model="scope.row.loadingTime"
              style="width: 200px"
            ></DatePicker>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.remarks"
              placeholder="请填写备注"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="bookbuytime" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="small"
                type="primary"
                @click="preservationFina(scope.$index, scope.row)"
                >保存</el-button
              >
              <el-button
                style="margin-left: 7px"
                size="small"
                type="danger"
                v-if="!scope.row.editing"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              >
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Modal
      width="800"
      v-model="curMapAddress"
      title="车辆当前位置"
      @on-cancel="cancel"
    >
      <div style="margin-bottom: 10px">
        <div>定位车辆：{{ carVehicle }}</div>
        <div>当前车速：{{ carspd }}km/h</div>
        <div>定位时间：{{ carTime }}</div>
        <div>当前位置：{{ caraddress }}</div>
      </div>
      <div class="modal-box">
        <div style="width: 100%; height: 400px" id="themap" class="map"></div>
      </div>
      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button @click="curMapAddress = false" style="margin-left: 8px"
          >取消</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      curMapAddress: false, //车辆弹框
      mapVehic: null,
      marker: null,
      caraddress: "",
      carspd: "",
      carVehicle: "",
      carTime: "",
      //
      searchForm: {
        fruit: "",
      },
      //
      searchFormTable: {},
      //
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "#",
          type: "index",
          width: 60,
        },
        {
          title: "姓名",
          key: "name",
          minWidth: 180,
        },
        {
          title: "车牌号",
          key: "license",
          minWidth: 180,
        },
        {
          title: "车辆类型",
          key: "type",
          minWidth: 180,
        },
        {
          title: "核定载质量",
          key: "capacity",
          minWidth: 180,
        },
        {
          title: "联系电话",
          key: "contact",
          minWidth: 180,
        },
        {
          title: "是否运输",
          key: "transport",
          minWidth: 180,
          render: (h, params) => {
            if (params.row.transport == 1) {
              return h("div", "是");
            } else {
              return h("div", { style: { color: "#DC143C" } }, "否");
            }
          },
        },

        {
          title: "操作",
          slot: "actionCarriage",
          align: "center",
          fixed: "right",
          width: 120,
        },
      ],
      data: [
        {
          name: "张三",
          license: "京6633",
          capacity: "100",
          type: "高栏",
          contact: 1583635755,
          transport: 1,
          loadingTime: "",
          remarks: "请在11号到场,否则无法装货",
        },
        {
          name: "李四",
          license: "京6633",
          capacity: "100",
          type: "高栏",
          contact: 1583635755,
          transport: 1,
          loadingTime: "",
          remarks: "请在11号到场,否则无法装货",
        },
        {
          name: "王五",
          license: "京6633",
          capacity: "100",
          type: "高栏",
          contact: 1583635755,
          transport: 1,
          loadingTime: "",
          remarks: "请在11号到场,否则无法装货",
        },
        {
          name: "李六",
          license: "京6633",
          capacity: "100",
          type: "高栏",
          contact: 1583635755,
          transport: 1,
          loadingTime: "",
          remarks: "请在11号到场,否则无法装货",
        },
      ],
      //
      settlementData: [],
      shoW: false,
      showApm: true,
      devInfo: {
        title: "",
        icon: "",
        state: "",
        address: "",
        electricity: "",
        gas: "",
        guan: "",
        water: "",
        years: "",
        time: "",
        mianji: "",
      },
      zoomSize: "",
      map: null,
      markerData: [
        {
          title: "1号厂区",
          icon: "https://webapi.amap.com/images/car.png", //点标记图片路径
          state: "正常使用",
          license: "豫A0088",
          address:'河南省平顶山市石龙区人民路街道',
          electricity: "李四",
          gas: "15836357533",
          guan: "是",
          water: "30",
          years: "XX",
          total: "27784T",
          time: "2011.09.08",
          mianji: "1200M3",
          position: [116.368904, 39.923423],
          offset: new AMap.Pixel(-8, -30),
        },
        {
          title: "2号厂区",
          icon: "https://webapi.amap.com/images/car.png", //点标记图片路径
          state: "已废弃",
          license: "豫A0088",
          electricity: "张三",
            address:'河南省平顶山市石龙区人民路街道',
          gas: "15836357533",
          guan: "是",
          water: "30",
          years: "XX",
          total: "27784T",
          time: "2006.09.08",
          mianji: "1200M3",
          position: [116.382122, 39.921176],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: "车辆定位",
          icon: "https://webapi.amap.com/images/car.png", //点标记图片路径
          state: "正常使用",
          license: "豫A0088",
            address:'河南省平顶山市石龙区人民路街道',
          electricity: "李四",
          gas: "15836357533",
          guan: "是",
          water: "30",
          years: "XX",
          total: "27784T",
          time: "2011.09.08",
          mianji: "1200M3",
          position: [116.398258, 39.9146],
          offset: new AMap.Pixel(-12, -30),
        },
      ],
      markers: [
        {
          position: [116.398258, 39.9146],
          id: 1,
          icon: require("@/assets/stars.png"),
        },
        {
          position: [116.398258, 39.9146],
          id: 2,
          icon: require("@/assets/stars.png"),
        },
        {
          position: [116.398258, 39.9146],
          id: 3,
          icon: require("@/assets/stars.png"),
        },
        {
          position: [116.398258, 39.9146],
          id: 4,
          icon: require("@/assets/stars.png"),
        },
      ],
      greaterThanMarker: null,
    };
  },
  mounted() {
    this.map = this.createMap();
    this.map.clearMap();
    this.addMarker();
    //获取当前时间并打印
    var _this = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth() + 1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf =
      new Date().getMinutes() < 10
        ? "0" + new Date().getMinutes()
        : new Date().getMinutes();
    let ss =
      new Date().getSeconds() < 10
        ? "0" + new Date().getSeconds()
        : new Date().getSeconds();
    mm = mm >= 10 ? mm : "0" + mm;
    dd = dd >= 10 ? dd : "0" + dd;
    hh = hh >= 10 ? hh : "0" + hh;
    mf = mf >= 10 ? mf : "0" + mf;
    this.timeData = yy + "-" + mm + "-" + dd + ":";
  },
  created() {},
  methods: {
    // 选择
    selectCar(row) {
      this.settlementData.push(row);
    },
     handleDelete(index, row) {
      if (row) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "确认将该结算规则删除？",
          loading: true,
          onOk: () => {
            this.$Modal.remove();
            this.settlementData.splice(index, 1);
          },
        });
      } else {
        this.$Modal.confirm({
          title: "确认删除",
          content: "确认将该结算规则删除？",
          loading: true,
          onOk: () => {
            this.$Modal.remove();
            //删除行数
            deleteCompanyFinance({ companyId: row.companyId }).then((res) => {
              if (res.code == 200) {
                this.grtSelect();
                this.$Message.success("删除成功");
                this.settlementData.forEach((item, index) => {
                  if (item.financeVoId == row.financeVoId) {
                    this.settlementData.splice(index, 1);
                  }
                });
                this.grtSelect();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
      }
      //
    },
    // 保存
    preservationFina(index, row) {

      if (row) {
        this.$Modal.confirm({
          title: "确认保存",
          content: "确认将该结算规则保存？",
          loading: true,
          onOk: () => {
            this.$Modal.remove();
            
            saveCompanyFinance(row).then((res) => {
              if (res.code == 200) {
                this.$Message.success("保存成功");
                this.getDataList();
                this.grtSelect();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
      } else {
        this.$Modal.confirm({
          title: "确认保存",
          content: "确认将该结算规则保存？",
          loading: true,
          onOk: () => {
            this.$Modal.remove();
            saveCompanyFinance(row).then((res) => {
              if (res.code == 200) {
                this.getDataList();
                this.grtSelect();
                this.$Message.success("保存成功");
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
      }
    },

    //获取车辆最新位置
    getVehicleposition(vehicleNum) {
      this.loading = true;
      let obj = { vehicleNum: vehicleNum };
      vehicleposition(obj).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.caraddress = res.result.result.adr;
          this.carspd = res.result.result.spd;
          this.carVehicle = vehicleNum;
          this.carTime = res.result.result.utc;
          this.curMapAddress = true;
          this.mapShow(res.result.result);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    mapShow(val) {
      let startx = val.lon;
      let starty = val.lat;
      var map = new AMap.Map("themap", {
        resizeEnable: true,
        // center: val[0],
        center: [val.lon, val.lat],
        zoom: 13,
      });
      var begin = new AMap.Marker({
        position: new AMap.LngLat(startx, starty), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: "https://webapi.amap.com/images/car.png",
      });
      map.add(begin);
      // this.marker.setMap(map);
    },
    //1.创建map对象
    createMap() {
      let this_ = this;
      //1.地图初始化时，在地图上添加marker标记,鼠标点击marker可弹出自定义的信息窗体
      var mapData = new AMap.Map("container-map", {
        resizeEnable: true,
        center: [116.368904, 39.923423], //地图中心点位置
      });
      //获取当前地图级别
      var logMapinfo = function () {
        this_.zoomSize = mapData.getZoom() || 11;
        this_.addMarker();
      };
      logMapinfo();
      // 正在缩放';
      function mapZoom() {
        logMapinfo();
      }
      // 事件绑定
      function zoomOn() {
        mapData.on("zoomchange", mapZoom);
      }
      zoomOn();
      return mapData;
    },
    //2.添加点标记
    addMarker() {
      const this_ = this;
      let arr = [];
      this.markerData.forEach((item) => {
        let marker1 = new AMap.Marker({
          icon: item.icon, //点标记图片路径
          position: item.position, //位置
          offset: item.offset, //偏移
        });
        arr.push(
          Object.assign(item, {
            mapId: marker1._amap_id,
          })
        );
        marker1.setMap(this_.map);
        // if (this_.zoomSize < 13) {
        //   this.markerData.item.marker1.setMap(null);
        // }
        AMap.event.addListener(marker1, "click", (e) => {
          this_.markerClick(arr, marker1);
        });
      });
      // // 清除
      //   if (this_.map) {
      //     this_.map.clearMap();
      //   }
    },

    //3.点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体
    markerClick(arr, marker) {
      let arrNew = arr.filter((x) => x.mapId == marker._amap_id);
      this.devInfo = arrNew && arrNew[0];
      let infoWindow = this.createInfoWindow();
      this.openInfoWindow(infoWindow, marker);
    },
    //4.构建自定义窗体
    createInfoWindow() {
      let infoWindowData = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.$refs.infoData,
        // content: this.getContent(),
        offset: new AMap.Pixel(16, -45),
      });
      return infoWindowData;
    },

    //5.打开窗体
    openInfoWindow(infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition());
    },
    //6.关闭窗体
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
  },
};
</script>

<style>
html,
body,
#container-map {
  height: 800px;
  width: 100%;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  /* width: auto; */
  width: 28rem;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

/* span {
  margin-left: 5px;
  font-size: 11px;
} */

.info-middle img {
  float: left;
  margin-right: 6px;
}

.info-span {
  /* margin-left: 35px; */
  font-size: 11px;
}

.info-div {
  width: 200px;
  display: inline-block;
  margin-left: 10px;
}

.info-img {
  width: 40px;
  height: 40px;
}

/* .info-a-title {
  font-size: 14px;
} */
#container-map {
  height: 820px;
}
/* #container .amap-icon img,
.amap-marker-content img {
  width: 64px;
  height: 64px;
} */
.springFrame {
  height: 800px;
  width: 100%;
  overflow: hidden;
}
/* 第二层 */
/* <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> */

.collision-btn.disable {
  background-image: none;
  color: lightgrey;
  border-color: lightgrey;
  cursor: not-allowed;
}
.collision-btn.disable:hover {
  background-color: #fff;
  border-color: lightgrey;
}
.input-card .btn {
  margin-right: 0.8rem;
}
.title {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.5em 1em;
  height: auto;
  border-radius: 2px;
  font-weight: 500;
  font-size: 20px;
  width: 307px;
  margin-left: -153px;
  text-align: center;
}
</style>
<style lang="less" scoped>
.search-css {
  margin-top: 20px;
  margin-left: 10px;
}
.Check-css {
  margin-bottom: 10px;
}
.line {
  margin: 20px 0;
  border: 1px solid #eee;
}

// @import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
</style>